<template>
  <page-layout class="task-detail">
    <div style="padding: 2px; background: #fff; margin-bottom: 20px">
      <a-steps
        v-model="current"
        type="navigation"
        size="small"
        style="padding: 20px; margin-bottom: 20px"
        :style="stepStyle"
        @change="onChange"
      >
        <a-step
          :status="StatusStyle(index.num)"
          :title="index.status"
          :disabled="key > detailData.status"
          v-for="(index, key) in allStatus"
          :key="key"
        />
      </a-steps>
    </div>
    <a-card>
      <a-button size="large" style="" @click="$router.go(-1)">返回</a-button>
      <!--项目详情 -->
      <div v-if="messageStatus">
        <a-row style="margin-top: 20px">
          <a-col :span="12">
            <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
              <a-form-item label="项目名称">
                <a-input
                  :value="detailData.title || '无'"
                  disabled
                  size="large"
                />
              </a-form-item>
              <a-form-item label="创建者">
                <a-input
                  :value="detailData.author_name || '无'"
                  disabled
                  size="large"
                />
              </a-form-item>
              <a-form-item label="所属部门">
                <a-input
                  :value="detailData.department_name || '无'"
                  disabled
                  size="large"
                />
              </a-form-item>
            </a-form>
          </a-col>
          <a-col :span="12" v-if="messageStatus">
            <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
              <a-form-item label="开发团队">
                <a-input :value="team || '无'" disabled size="large" />
              </a-form-item>
              <a-form-item label="开始时间">
                <a-input
                  :value="detailData.start_time || '无'"
                  disabled
                  size="large"
                />
              </a-form-item>
              <a-form-item label="结束时间">
                <a-input
                  :value="detailData.end_time || '无'"
                  disabled
                  size="large"
                />
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>
        <a-form :label-col="{ span: 3 }" :wrapper-col="{ span: 18 }">
          <a-form-item label="项目详情">
            <div
              style="
                border: 1px solid #d9d9d9;
                border-radius: 4px;
                padding: 10px 10px;
                min-height: 70px;
              "
              v-html="detailData.introduce || '无'"
            ></div>
          </a-form-item>
          <a-form-item label="附件">
            <a-empty
              v-if="
                !detailData.attachment_url ||
                detailData.attachment_url.length === 0
              "
              description="暂无附件"
            ></a-empty>
            <div v-else class="enclosure-wrapper">
              <div
                class="enclosure-item"
                v-for="file in detailData.attachment_url"
                :key="file.uid"
              >
                <a-icon
                  type="file-zip"
                  theme="twoTone"
                  style="font-size: 50px"
                />
                <a
                  :href="
                    file.response &&
                    file.response.data &&
                    file.response.data.url
                  "
                  download
                  class="enclosure-content"
                  >{{ file.name }}</a
                >
              </div>
            </div>
          </a-form-item>
        </a-form>
      </div>
      <!--调研内容 -->
      <div v-if="investStatus">
        <a-row style="margin-top: 20px">
          <a-col :span="12">
            <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
              <a-form-item label="调研负责人">
                <a-input
                  :value="detailData.invest.user || '无'"
                  disabled
                  size="large"
                />
              </a-form-item>
              <a-form-item label="调研原因">
                <a-input
                  :value="detailData.invest.reason || '无'"
                  disabled
                  size="large"
                />
              </a-form-item>
              <a-form-item label="调研结果">
                <a-input
                  :value="detailData.invest.reason || '无'"
                  disabled
                  size="large"
                />
              </a-form-item>
              <a-form-item label="流程图">
                <a-empty
                  v-if="
                    !detailData.invest.flow_chat ||
                    detailData.invest.flow_chat.length == 0
                  "
                  style="padding: 20px; color: red"
                  description="暂无上传流程图"
                ></a-empty>
                <div v-else class="enclosure-wrapper">
                  <div
                    class="enclosure-item"
                    style="width: 100%"
                    v-for="file in detailData.invest.flow_chat"
                    :key="file.uid"
                  >
                    <a-icon
                      type="file-zip"
                      theme="twoTone"
                      style="font-size: 50px"
                    />
                    <a
                      :href="
                        file.response &&
                        file.response.data &&
                        file.response.data.url
                      "
                      download
                      class="enclosure-content"
                      >{{ file.name }}</a
                    >
                  </div>
                </div>
              </a-form-item>
              <a-form-item label="思维导图">
                <a-empty
                  v-if="
                    !detailData.invest.mind_map ||
                    detailData.invest.mind_map.length === 0
                  "
                  description="暂无上传导图"
                  style="padding: 20px; color: red"
                ></a-empty>
                <div v-else class="enclosure-wrapper">
                  <div
                    class="enclosure-item"
                    style="width: 100%"
                    v-for="file in detailData.invest.mind_map"
                    :key="file.uid"
                  >
                    <a-icon
                      type="file-zip"
                      theme="twoTone"
                      style="font-size: 50px"
                    />
                    <a
                      :href="
                        file.response &&
                        file.response.data &&
                        file.response.data.url
                      "
                      download
                      class="enclosure-content"
                      >{{ file.name }}</a
                    >
                  </div>
                </div>
              </a-form-item>
            </a-form>
          </a-col>
          <a-col :span="12">
            <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
              <a-form-item label="开始时间">
                <a-input
                  :value="detailData.invest.began_at || '无'"
                  disabled
                  size="large"
                />
              </a-form-item>
              <a-form-item label="结束时间">
                <a-input
                  :value="detailData.invest.end_at || '无'"
                  disabled
                  size="large"
                />
              </a-form-item>
              <a-form-item label="功能表">
                <a-empty
                  v-if="
                    !detailData.invest.function_table ||
                    detailData.invest.function_table.length === 0
                  "
                  description="暂无功能表上传"
                  style="padding: 20px; color: red"
                >
                </a-empty>
                <div v-else class="enclosure-wrapper">
                  <div
                    class="enclosure-item"
                    style="width: 100%"
                    v-for="file in detailData.invest.function_table"
                    :key="file.uid"
                  >
                    <a-icon
                      type="file-zip"
                      theme="twoTone"
                      style="font-size: 50px"
                    />
                    <a
                      :href="
                        file.response &&
                        file.response.data &&
                        file.response.data.url
                      "
                      download
                      class="enclosure-content"
                      >{{ file.name }}</a
                    >
                  </div>
                </div>
              </a-form-item>
              <a-form-item label="范围说明书">
                <a-empty
                  v-if="
                    !detailData.invest.scope_statement ||
                    detailData.invest.scope_statement.length === 0
                  "
                  description="暂无上传说明书"
                  style="padding: 20px; color: red"
                  >暂无上传说明书</a-empty
                >
                <div v-else class="enclosure-wrapper">
                  <div
                    class="enclosure-item"
                    style="width: 100%"
                    v-for="file in detailData.invest.scope_statement"
                    :key="file.uid"
                  >
                    <a-icon
                      type="file-zip"
                      theme="twoTone"
                      style="font-size: 50px"
                    />
                    <a
                      :href="
                        file.response &&
                        file.response.data &&
                        file.response.data.url
                      "
                      download
                      class="enclosure-content"
                      >{{ file.name }})</a
                    >
                  </div>
                </div>
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>
      </div>
      <!--原型图 -->
      <div v-if="imageStatus">
        <a-row style="margin-top: 20px">
          <a-col :span="12">
            <a-form :label-col="{ span: 12 }" :wrapper-col="{ span: 12 }">
              <a-form-item label="原型图说明">
                <a-input
                  :value="detailData.origin_image.remark || '无'"
                  disabled
                  size="large"
                />
              </a-form-item>
              <a-form-item label="原型图">
                <a-empty
                  v-if="
                    !detailData.origin_image.files ||
                    detailData.origin_image.files.length == 0
                  "
                  description="暂无上传原型图"
                ></a-empty>
                <div v-else class="enclosure-wrapper">
                  <div
                    class="enclosure-item"
                    v-for="file in detailData.origin_image.files"
                    :key="file.uid"
                  >
                    <a-icon
                      type="file-zip"
                      theme="twoTone"
                      style="font-size: 50px"
                    />
                    <a
                      :href="
                        file.response &&
                        file.response.data &&
                        file.response.data.url
                      "
                      download
                      class="enclosure-content"
                      >{{ file.name }}</a
                    >
                  </div>
                </div>
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>
      </div>
    </a-card>
  </page-layout>
</template>

<script>
import PageLayout from "@/layouts/PageLayout";
import { detail, status } from "@/services/projects";
export default {
  components: { PageLayout },
  data() {
    return {
      imageStatus: false,
      messageStatus: true,
      investStatus: false,
      allStatus: [],
      current: 0,
      stepStyle: {
        marginBottom: "60px",
        boxShadow: "0px -1px 0 0 #e8e8e8 inset"
      },
      team: "",
      detailData: {}
    };
  },
  computed: {
    StatusStyle() {
      return function (value) {
        if (value > this.detailData.status) {
          return "wait";
        }
        if (value == this.detailData.status) {
          return "process";
        }
        if (value < this.detailData.status) {
          return "finish";
        }
      };
    }
  },
  created() {
    this.getDetailData();
  },

  methods: {
    //点击状态修改展示内容方法
    onChange(current) {
      let num = current + 1;
      if (num == 1) {
        this.messageStatus = true;
        this.investStatus = false;
        this.imageStatus = false;
      }
      if (num == 2) {
        this.investStatus = true;
        this.messageStatus = false;
        this.imageStatus = false;
      }
      if (num == 3) {
        this.imageStatus = true;
        this.investStatus = false;
        this.messageStatus = false;
      }
      // console.log('onChange:', current);
      this.current = current;
    },
    getDetailData() {
      status().then((res) => {
        if (res.data.code === 20000) this.allStatus = res.data.data;
        // console.log(this.allStatus)
      });
      detail(this.$route.query.id).then((res) => {
        // detail(22).then((res) => {
        if (res.data.code !== 20000)
          this.$message.error(res.data.message || "数据加载失败，请刷新重试~");
        this.detailData = res.data.data;
        // console.log(this.detailData)
        // 团队人员单独处理
        this.team = this.detailData.team.map((item) => item.name).join(",");
        // console.log(res.data.data, "getDetailData");
      });
    }
  }
};
</script>

<style lang="less" scoped>
.task-detail {
  .ant-input[disabled] {
    color: #333333;
    background-color: #fff;
    font-size: 16px;
  }
  .blue {
    .ant-input[disabled] {
      color: #2591ff;
      background-color: #fff;
      font-size: 16px;
    }
  }
  .green {
    .ant-input[disabled] {
      color: #00ca13;
      background-color: #fff;
      font-size: 16px;
    }
  }
  .enclosure-wrapper {
    display: flex;
    // margin-top: 15px;
    flex-wrap: wrap;
    justify-content: space-between;
    // align-content: space-between;
    .enclosure-item {
      // margin-top: 20px;
      width: 10%;
      display: flex;
      flex-direction: column;
      // justify-content: center;
      align-content: center;
      text-align: center;
      .enclosure-content {
        margin-top: 15px;
      }
    }
  }
}
</style>
